<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>OvuBase - Twoja baza cykli owulacyjnych</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="js/bootstrap-3.0.0/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="js/bootstrap-datepicker-1.2.0/css/datepicker.css" rel="stylesheet" media="screen">
<link href="js/jqplot/jquery.jqplot.css" rel="stylesheet" media="screen" />
<link href="ovubase.css" rel="stylesheet" media="screen" />
</head>
<body>
  <div class="container">

    <!-- header -->
    <div class="page-header">
      <div id="header-logo"></div>
      <h1>
        OvuBase <small>Twoja baza cykli owulacyjnych</small>
      </h1>
    </div>

    <!-- jumbotron -->
    <div id="ovu-jumbotron" class="jumbotron">
      <h1>Witaj w OvuBase!</h1>
      <p>OvuBase pozwala na wprowadzenie szczegółowych informacji Twoich cyklach, przeglądanie ich i porównywanie. Wszystkie dane
        przechowywane są na Twoim prywatnym koncie Google.</p>
      <div id="ovu-jumbo-goog-load-progress" class="progress progress-striped active" style="height: auto">
        <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
          <span>Sprawdzanie połączenia z Google Drive...</span>
        </div>
      </div>
      <div id="ovu-jumbo-login-buttons" style="display: none">
        <button class="btn btn-primary btn-lg" onclick="ovuConnectToGoogleDrive()">Zaloguj się kontem Google</button>
        <button class="btn btn-default" onclick="ovuShowLocalStorageNotice()">Przetestuj w trybie lokalnym</button>
      </div>
      <div id="ovu-local-storage-notice" class="alert alert-danger" style="display: none">
        <p>
          <strong>Ostrzeżenie:</strong> W trybie lokalnym dane o Twoich cyklach będą zapisywanie wyłącznie w pamięci przeglądarki na
          komputerze którego aktualnie używasz. Dane przechowywane w ten sposób mogą zostać łatwo utracone (z wielu różnych przyczyn).
          Polecamy używanie tego trybu wyłącznie w celu przetestowania aplikacji OvuBase. Do standardowego użytkowania, połącz się z kontem
          Google, na którym Twoje dane przechowywane są w sposób bezpieczny.
        </p>
        <div>
          <button class="btn btn-primary btn-lg" type="button" onclick="ovuConnectToGoogleDrive()">Zaloguj się kontem Google</button>
          <button class="btn btn-danger" type="button" onclick="ovuInitTestMode()">Przetestuj w trybie lokalnym</button>
        </div>
      </div>
    </div>

    <!-- local storage warning -->
    <div id="ovu-local-storage-warning" class="alert alert-warning" style="display: none">
      <strong>Ostrzeżenie: </strong>aplikacja działa w trybie lokalnym. <strong><a href="javascript:void(0)"
        onclick="ovuConnectToGoogleDrive()">Połącz z Google Drive</a></strong> aby zapisać swoje dane na zdalnym serwerze.
    </div>

    <!-- breadcrumb -->
    <ol id="ovu-breadcrumb" class="breadcrumb" style="display: none">
      <li class="active">Lista cykli</li>
    </ol>

    <!-- cycle list -->
    <div id="ovu-cycle-list-row" class="well" style="display: none">
      <div class="row" style="margin-bottom: 1em">
        <div class="col-md-6">
          <div class="btn-group">
            <button type="button" data-toggle="modal" data-target="#ovu-cycle-add" class="btn btn-primary">Dodaj cykl</button>
            <!-- 
            <button type="button" class="btn">Wybierz charakterystyki cykli</button>
             -->
          </div>
        </div>
        <div class="col-md-6">
          <a id="ovu-goog-status" class="btn btn-link pull-right"></a>
        </div>
      </div>
      <div id="ovu-cycle-list" class="row"></div>
    </div>

    <!-- cycle details -->
    <div id="ovu-cycle-details-row" class="well" style="display: none">
      <div class="row" style="margin-bottom: 1em">
        <div class="col-md-12">
          <div class="btn-group">
            <button type="button" class="btn btn-default" onclick="ovuShowCycleList()">Wróć do listy cykli</button>
          </div>
          <div class="btn-group">
            <button type="button" data-toggle="modal" data-target="#ovu-day-add" class="btn btn-primary">Dodaj dzień</button>
            <button type="button" data-toggle="modal" data-target="#ovu-cycle-delete" class="btn">Usuń cykl</button>
          </div>
        </div>
      </div>
      <div id="ovu-cycle-details-table" class="row">
        <div class="col-md-6">
          <table>
            <tr>
              <td class="cycle-details-label">Data pierwszego dnia:</td>
              <td id="ovu-cycle-details-start-date" class="date"></td>
              <td>[<a id="ovu-cycle-details-change-start-date" href="javascript:void(0)">Zmień</a>]
            </tr>
            <tr>
              <td class="cycle-details-label">Data ostatniego dnia:</td>
              <td id="ovu-cycle-details-end-date" class="date"></td>
              <td>[<a id="ovu-cycle-details-change-end-date" href="javascript:void(0)">Zmień</a>]
            </tr>
          </table>
        </div>
        <div class="col-md-6">
          <table>
            <tr>
              <td class="cycle-details-label">Ilość dni cyklu:</td>
              <td id="ovu-cycle-details-num-days"></td>
              <td>[<a class="tooltip-holder" href="javascript:void(0)" title="" data-toggle="tooltip"
                data-original-title="Ilość dni cyklu jest obliczana automatycznie na podstawie dat pierwszego i ostatniego dnia cyklu.">?</a>]
                <!--  -->
              <td>
            </tr>
          </table>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12">
          <div id="ovu-cycle-chart" style="height: 500px"></div>
        </div>
      </div>
    </div>

    <div class="row ovu-footer">
      <p>
        <a href="http://sprawymamy.pl">Strona główna</a> | <a href="http://sprawymamy.pl/forum/kategorie">Forum</a> | <a
          href="http://sprawymamy.pl/kontakt">Kontakt</a> <span style="float: right">© 2013, 2014 sprawymamy.pl</span>
      </p>
    </div>

  </div>
  <!-- container -->

  <!-- cycle add dialog -->
  <div id="ovu-cycle-add" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title">Nowy cykl</h4>
        </div>
        <div class="modal-body">
          <form class="form-horizontal" role="form">
            <div class="form-group">
              <label for="ovu-cycle-add-start-date" class="col-md-4 control-label">Data pierwszego dnia</label>
              <div class="col-md-8">
                <div class="input-group date">
                  <input id="ovu-cycle-add-start-date" type="text" class="form-control"><span class="input-group-addon"><i
                    class="glyphicon glyphicon-calendar"></i></span>
                </div>
              </div>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Anuluj</button>
          <button type="button" class="btn btn-primary" onclick="ovuAddCycle()">Dodaj</button>
        </div>
      </div>
    </div>
  </div>

  <!-- cycle delete dialog -->
  <div id="ovu-cycle-delete" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title">Usuwanie cyklu</h4>
        </div>
        <div class="modal-body">
          <p>Czy na pewno usunąć cykl?</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Anuluj</button>
          <button type="button" class="btn btn-primary" onclick="ovuDeleteCycle();">Usuń</button>
        </div>
      </div>
    </div>
  </div>

  <!-- day add dialog -->
  <div id="ovu-day-add" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title">Nowy dzień</h4>
        </div>
        <div class="modal-body">
          <form class="form-horizontal" role="form">
            <div class="form-group">
              <label for="ovu-day-add-date" class="col-md-4 control-label">Data</label>
              <div class="col-md-8">
                <div class="input-group date">
                  <input id="ovu-day-add-date" type="text" class="form-control"><span class="input-group-addon"><i
                    class="glyphicon glyphicon-calendar"></i></span>
                </div>
              </div>
            </div>
            <div class="form-group">
              <label for="ovu-day-add-temperature" class="col-md-4 control-label">Temperatura</label>
              <div class="col-md-8">
                <input id="ovu-day-add-temperature" type="number" step="0.01" class="form-control">
              </div>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Anuluj</button>
          <button type="button" class="btn btn-primary" onclick="ovuDayAdd();">Dodaj</button>
        </div>
      </div>
    </div>
  </div>

  <!-- day details dialog -->
  <div id="ovu-day-details" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title">Dzień:</h4>
        </div>
        <div class="modal-body">
          <form class="form-horizontal" role="form">
            <div class="form-group">
              <label for="ovu-day-mod-date" class="col-md-4 control-label">Data</label>
              <div class="col-md-8">
                <input id="ovu-day-mod-date" type="text" class="form-control" disabled>
              </div>
            </div>
            <div class="form-group">
              <label for="ovu-day-mod-temperature" class="col-md-4 control-label">Temperatura</label>
              <div class="col-md-8">
                <input id="ovu-day-mod-temperature" type="number" step="0.01" class="form-control">
              </div>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary" onclick="ovuDayModify()">Zapisz zmiany</button>
          <button type="button" class="btn" onclick="ovuDayDelete()">Usuń dzień</button>
          <button type="button" class="btn btn-default" data-dismiss="modal">Zamknij</button>
        </div>
      </div>
    </div>
  </div>

  <!-- UI Libraries -->
  <script type="text/javascript" src="js/jquery-2.0.3.js"></script>
  <script type="text/javascript" src="js/jquery.json-2.4.min.js"></script>
  <script type="text/javascript" src="js/amplify-1.1.0/amplify.js"></script>
  <script type="text/javascript" src="js/bootstrap-3.0.0/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="js/bootstrap-datepicker-1.2.0/js/bootstrap-datepicker.js"></script>
  <script type="text/javascript" src="js/jqplot/jquery.jqplot.min.js"></script>
  <script type="text/javascript" src="js/jqplot/plugins/jqplot.highlighter.min.js"></script>
  <script type="text/javascript" src="js/jqplot/plugins/jqplot.cursor.min.js"></script>
  <script type="text/javascript" src="js/jqplot/plugins/jqplot.dateAxisRenderer.min.js"></script>

  <script type="text/javascript" src="js/ovubase.js"></script>

  <!-- Google API -->
  <script type="text/javascript" src="https://apis.google.com/js/client.js?onload=handleGoogleApiClientLoad"></script>

</body>
</html>
